<template>
  <div class="Bigbox">
    <!-- 内容 -->
    <div class="main" style="pading: 0" >
      <div class="top">
        <!-- 1 -->

        <el-col :span="8">
          <el-card shadow="hover">
            <div class="tubiao" style="background-color: rgb(84, 173, 235)">
              <div class="title">今日访问</div>
              <div class="fonts">{{ count.currentday.total }}</div>
            </div>
            <div class="one">
              <ul>
                <li class="shen">待审核：{{ count.currentday.wait }} 人</li>
                <li class="tong">未通过：{{ count.currentday.pass }} 人</li>
                <li>已取消：{{ count.currentday.cancel }} 人</li>
              </ul>
            </div>
          </el-card>
        </el-col>
        <!-- 2 -->
        <el-col :span="8">
          <el-card shadow="hover">
            <div class="tubiao" style="background-color: rgb(250, 88, 34)">
              <div class="title">昨日访客</div>
              <div class="fonts">{{ count.yesterday.total }}</div>
            </div>
            <div class="one">
              <ul>
                <li class="shen">待审核：{{ count.yesterday.wait }} 人</li>
                <li class="tong">未通过：{{ count.yesterday.pass }} 人</li>
                <li>已取消：{{ count.yesterday.cancel }} 人</li>
              </ul>
            </div>
          </el-card>
        </el-col>
        <!-- 3 -->
        <el-col :span="8">
          <el-card shadow="hover">
            <div class="tubiao" style="background-color: rgb(0, 151, 137)">
              <div class="title">最近七天</div>
              <div class="fonts">{{ count.week.total }}</div>
            </div>
            <div class="one">
              <ul>
                <li class="shen">待审核：{{ count.week.wait }} 人</li>
                <li class="tong">未通过：{{ count.week.pass }} 人</li>
                <li>已取消：{{ count.week.cancel }} 人</li>
              </ul>
            </div>
          </el-card>
        </el-col>
        <!-- 4 -->
        <el-col :span="8">
          <el-card shadow="hover">
            <div class="tubiao" style="background-color: rgb(247, 184, 36)">
              <div class="title">近三十天</div>
              <div class="fonts">{{ count.month.total }}</div>
            </div>
            <div class="one">
              <ul>
                <li class="shen">待审核：{{ count.month.wait }} 人</li>
                <li class="tong">未通过：{{ count.month.pass }} 人</li>
                <li>已取消：{{ count.month.cancel }} 人</li>
              </ul>
            </div>
          </el-card>
        </el-col>
        <!-- 5 -->
        <el-col :span="8">
          <el-card shadow="hover">
            <div class="tubiao" style="background-color: rgb(48, 65, 86)">
              <div class="title">最近一年</div>
              <div class="fonts">{{ count.year.total }}</div>
            </div>
            <div class="one">
              <ul>
                <li class="shen">待审核：{{ count.year.wait }} 人</li>
                <li class="tong">未通过：{{ count.year.pass }} 人</li>
                <li>已取消：{{ count.year.cancel }} 人</li>
              </ul>
            </div>
          </el-card>
        </el-col>
      </div>
      <!-- 图表 -->
      <div class="conter">
        <el-card class="box-card">
          <div class="chart" ref="chartRef"></div>
        </el-card>
      </div>
      <!-- 本周详情 -->
      <div class="conter">
        <el-card class="box-card">
          <div class="title">本周详情</div>
          <div>
            <div class="body">
              <div class="item">
                <div class="item-box">
                  <span class="ben">本周人员统计表：</span>
                  <table cellspacing="0" cellpadding="0">
                    <tr>
                      <td>日期</td>
                      <td>人数</td>
                    </tr>
                    <tr>
                      <td>{{count.weekday== undefined ?(count.weekday):'暂无数据'}}</td>
                      <td>{{count.weekday== undefined ?(count.weekday):'暂无数据'}}</td>
                    </tr>
                  </table>
                </div>
                <div class="item-box">
                  <span class="ben">本周人员申请类型表：</span>
                  <table cellspacing="0" cellpadding="0">
                    <tr>
                      <td>日期</td>
                      <td>类型</td>
                      <td>人数</td>
                    </tr>
                    <tr>
                      <td>{{count.weektype== undefined ?(count.weektype):'暂无数据'}}</td>
                      <td>{{count.weektype== undefined ?(count.weektype):'暂无数据'}}</td>
                      <td>{{count.weektype== undefined ?(count.weektype):'暂无数据'}}</td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
  
  <script setup lang='ts'>
// 接口
import { reactive, ref, toRefs, onMounted, Ref } from "vue";
import { countList } from "../../api/visituser/index"; //轨迹列表
import * as echarts from "echarts";
let token = localStorage.getItem("token");
// console.log("token", token);

onMounted(() => {
  getCountList();
  chart = echarts.init(chartRef.value as HTMLElement);
  initChart();
  // 延时2秒后执行增量更新
  setTimeout(() => {
    updateChart();
  }, 2000);
});

// 接口数据
const data = reactive({
  from: {
    Authorization: token, //token
    departmentid: 1, //部门id
  },
});
const { from } = toRefs(data);
let count = ref({
  currentday: {
    //今日
    total: 0,
    wait: 0,
    pass: 0,
    cancel: 0,
  },
  yesterday: {
    //昨天
    total: 0,
    wait: 0,
    pass: 0,
    cancel: 0,
  },
  week: {
    //近七天
    total: 0,
    wait: 0,
    pass: 0,
    cancel: 0,
  },
  month: {
    //近30天
    total: 0,
    wait: 0,
    pass: 0,
    cancel: 0,
  },
  year: {
    //近一年
    total: 0,
    wait: 0,
    pass: 0,
    cancel: 0,
  },
  weekday: [
    //近一周每天的总数
    {
      time: '',
      num: 0,
    },
  ],
  weektype: [
    //近一周每天申请的人员类型 1 外来 2 老师 3 学生
    {
      time: "",
      type: 0,
      num: 0,
    },
  ],
}); //访客统计
// 访客统计
const getCountList = async () => {
  const res: any = await countList(data);
  console.log("访客统计", res);
  if (res.code === "00000") {
    count.value = res.data;
  }
};
// // 图表

let chart: echarts.ECharts;
const chartRef: Ref<HTMLElement | null> = ref(null);

const initChart = () => {
  const option: echarts.EChartsOption = {
    xAxis: {
      type: "category",
          // boundaryGap: false,
          // data: this.labels,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        type: "line",
      },
    ],
  };
  chart.setOption(option);
};
const updateChart = () => {
  const option: echarts.EChartsOption = {
    title:{text:'访客记录变化图'},
    xAxis: {
      data: [ "2022-11-14"],
    },
    yAxis: {
      data: [0,0.2,0.4,0.6,0.8,1],
    },
    series: [
      {
        name:"近七天总数",
        type:"line",
        data: [1, 1],
      },
      {
        name:"近七天外来人员",
        type:"line",
        data: [],
      },
      {
        name:"近七天来访学生",
        type:"line",
        data: [],
      },
      {
        name:"近七天来访老师",
        type:"line",
        data: [],
      },
    ],
    legend: {
          
        },
  };
  chart.setOption(option);
};
</script>
  
  <style scoped lang='less'>
* {
  margin: 0;
  padding: 0;
}
.main {
  background-color: #ededed;
  margin-top: 10px;
  width: 100%;
  height: 100%;
  padding-bottom: 1px !important;
  border-radius: 10px;
}
.top {
  width: 98%;
  height: 40%;
  margin: 0 auto;
  font-size: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 16px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.el-col-8 {
  width: 481px;
  align-items: center;
  margin-top: 30px;
  border-radius: 12px;
  // background: red;
  color: #554e4e;
}

/deep/.el-card__body {
  padding: 0 !important;
  // width: 481px;
  // background: blue;
  border-radius: 10px;
  // 演示
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;

  height: 20%;
}
.el-card {
  width: 481px;
  // background: gold;
  border-radius: 10px;
}
.tubiao {
  width: 40%;
  height: 100%;
  background: red;
  border-radius: 10px;
}
.one {
  width: 55%;
  height: 100%;
  margin-right: 5px;

  ul {
    list-style: none;
    font-size: 14px;
    li {
      line-height: 30px;
    }
    .shen {
      text-align: left;
      width: 100%;
      height: 28%;
      margin-top: 10%;
      font-size: 17px;
    }
    .tong {
      float: left;
      margin-right: 4%;
    }
  }
}
.el-card[data-v-868be962] {
  width: 400px;
  border-radius: 10px;
}
.title {
  font-size: 14.5px;
  color: #fff;
}
.fonts {
  font-size: 55px;
  font-weight: 700;
  width: 100%;
  text-align: center;
  color: #fff;
  margin-top: 5%;
}
// conter
.conter {
  margin: 0 auto;
  margin-top: 40px;
  margin-bottom: 20px;
  width: 100%;
  // background: red;

  // 卡片
  /deep/.el-card[data-v-868be962] {
    width: 98%;
    margin: 40px auto 0px;
    // background: blue;
    .el-card__body {
      display: flex;
      flex-direction: column;
    }
    .title {
      width: 100%;
      padding: 18px 20px;
      border-bottom: 1px solid #ced1d8;
      box-sizing: border-box;
      // background: forestgreen;
      color: #000;
    }
    .body {
      padding: 20px;
      // background: lawngreen;
      .item {
        margin-bottom: 18px;
        display: flex;
        justify-content: space-around;

        .item-box {
          display: flex;
          text-align: center;
          .ben {
            font-weight: 700;
            font-size: 16px;
          }
          td {
            width: 180px;
            padding: 10px 0;
            border: 1px solid #ced1d8;
          }
        }
      }
    }
  }
}
.chart {
  width: 100%;
  height: 400px;
}
</style>